<template>
    
    <table border="1px" >
        <thead>
            <tr>
                <th>用户id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="user in userList" :key="user.userId">
                <td>{{ user.userId }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.password }}</td>
                <td>{{ user.email }}</td>
            </tr>

        </tbody>
    </table>
</template>

<script setup lang="ts" name="User">

    import { type UserList } from '@/types/User';
    import axios from 'axios';
    import {ref } from 'vue';
    let userList=ref<UserList>([])
    

    axios.get('/user/queryAll')
    .then((resp)=>{ //向后端发送请求后，如果响应成功了，则把响应结果赋值给 resp对象
        console.log('成功了.....',resp.data);
        userList.value=resp.data
    })
    .catch((err)=>{ //如果失败抛异常了，则把响应错误的结果返回给err
        console.log('异常了....',err);
    })
    .finally(()=>{  //无论是否出现错误，都会必须执行的操作
        console.log("我一定执行......");
    })
    


</script>


<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

table caption {
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}

th,
td {
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;
}

table thead tr {
    background-color: #008c8c;
    color: #fff;
}

table tbody tr:nth-child(odd) {
    background-color: #eee;
}

table tbody tr:hover {
    background-color: #ccc;
}

table tbody tr td:first-child {
    color: #f40;
}

table tfoot tr td {
    text-align: right;
    padding-right: 20px;
}
</style>
